<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		@import url("https://fonts.googleapis.com/css?family=Lato:300");
		*, *::before, *::after {
		  box-sizing: border-box;
		}
		
		body {
		  font-family: "Lato";
		  font-size: 16px;
		}
		
		/*** <--- CIRCLE STYLES ---> ***/
		.wrap-circles {
		  display: flex;
		  min-height: 100vh;
		  flex-wrap: wrap;
		  justify-content: center;
		  align-items: center;
		  padding: 2rem 1rem;
		  background: #000;
		}
		
		.circle {
		  position: relative;
		  width: 150px;
		  height: 150px;
		  margin: 0.5rem;
		  border-radius: 50%;
		  background: #FFCDB2;
		  overflow: hidden;
		}
		.circle.per-25 {
		  background-image: conic-gradient(#B5838D 25%, #FFCDB2 0);
		}
		.circle.per-50 {
		  background-image: conic-gradient(#B5838D 50%, #FFCDB2 0);
		}
		.circle.per-75 {
		  background-image: conic-gradient(#B5838D 75%, #FFCDB2 0);
		}
		.circle.per-100 {
		  background-image: conic-gradient(#B5838D 100%, #FFCDB2 0);
		}
		.circle .inner {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  width: 115px;
		  height: 115px;
		  background: #000;
		  border-radius: 50%;
		  font-size: 1.85em;
		  font-weight: 300;
		  color: rgba(255, 255, 255, 0.75);
		}
	</style>
	<body>
		<div class="wrap-circles">
		  <div class="circle per-0">
		    <div class="inner">0%</div>
		  </div>
		  <div class="circle per-25">
		    <div class="inner">25%</div>
		  </div>
		  <div class="circle per-50">
		    <div class="inner">50%</div>
		  </div>
		  <div class="circle per-75">
		    <div class="inner">75%</div>
		  </div>
		  <div class="circle per-100">
		    <div class="inner">100%</div>
		  </div>
		</div>
	</body>
</html>
